<!DOCTYPE html>
  <head>
   <title>网页设计与制作</title>
	<meta name="keywords" content="网页设计与制作" />
	<meta name="description" content="网页设计与制作" />
    
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1">
 	
	
    
   	<link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/jquery-ui.css" /> <!-- popular tab -->
   	<link rel="stylesheet" href="css/templatemo_misc.css">
	<link rel="stylesheet" href="css/templatemo_style.css">    
    
    <!-- JavaScripts -->   
    <script src="js/jquery-1.11.1.min.js"></script> <!-- lightbox -->
	<script src="js/templatemo_custom.js"></script> <!-- lightbox -->
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/jquery-ui.min.js"></script> <!-- popular tab -->

    <!-- JavaScripts -->  
</head>
  <body>
  	<!-- menu start -->	
  	<div class="container menu">
    	<div class="row">
        	<div class="col-sm-4">
            	<div class="templatemo_webtitle"><img src="images/templatemo_logo.png" alt="logo"></div>
            </div>
        	<div class="col-sm-8">
            	<nav class="navbar navbar-default" role="navigation">
          <div class="container-fluid"> 
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="top-menu">
              <div class="collapse navbar-collapse main_menu" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <li class="current"><a href="index.html">首页</a></li>
                  <li><a href="html.html">HTML</a></li>
                  <li><a href="gallery.html">CSS</a></li>
                  <li><a href="gallery.html">案例库</a></li>
                  <li><a href="gallery.html">案例库</a></li>
                  <li><a href="contact.html">练习我们</a></li>
                </ul>
              </div>
            </div>
            <!-- /.navbar-collapse --> 
          </div>
          <!-- /.container-fluid --> 
        </nav>
            </div>
        </div>
    </div>
   
    <!-- home start -->
    <div class="container">
    <div class="row">
        	<div class="templatemo_home_top">
        	<div class="col-md-8">
            	<div class="templatemo_home_top_left shadow">
            	<div class="templatemo_hometop_title">网页设计与制作</div>
                <div class="templatemo_hometop_stitle">HTML+CSS</div>
                <p>
               	掌握有关网站建设的基本概念、创建网站的方法和步骤、重点掌握利用Dreamweaver软件来设计布局静态网页以及一些简单的JavaScript脚本语言、熟练掌握网页编写语言html，能够利用Dreamweaver来创建和设计一个网站，为以后学习Web动态网页的开发奠定基础
 </p>
                <p> 
                </p>
                <a href="#"><div class="templatemo_buttongreen">开始学习</div></a>
                <div class="clear"></div>
              </div>
            </div>
            <div class="col-md-4"><img src="images/index01.jpg" class="shadow" alt="templatemo home image01"></div>
            </div>
        </div>
    </div>
  
  
    <div class="container">
    	<div class="row margin30">
        	<div class="col-md-8">
            	<div class="templatemo_home_botleft shadow">
                	<div class="movie"> 
                    	<a href="#"><img src="images/templatemo_home03.jpg" alt="templatemo home image03"></a>
                  	</div>
                    <div class="para">
                    	<div class="big">课程介绍</div>
                        <div class="text">
                       	课程主要针对HTML5和CSS3中的内容进行讲解<br>
                       	视频：32讲<br>
                       	知识内容：56个<br>
                       	实在是编不下去了<br>
                        </div>
                        <a href="#"><div class="templatemo_buttongreen">LOREM IP SUMS</div></a>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 s_margin30">
            	<div class="templatemo_home_botright shadow">
                	<div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">最新课程</a></li>
                            <li><a href="#tabs-2">热门课程</a></li>
                        </ul>
                        <div id="tabs-1">
                            <div class="templatemo_popular_wrapper">
                            	<a href="#">
                            	<div class="popular_box">
                                	<div class="image"><img src="images/index03.jpg" alt="popular 1"></div>
                                    <div class="text">&lt;head &gt;标签</div>
                                </div> 
                                </a>
                                <div class="clear"></div>
                                <a href="#">
                                <div class="popular_box">
                                	<div class="image"><img src="images/index03.jpg" alt="popular 2"></div>
                                    <div class="text">列表标签</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                <a href="#">
                                <div class="popular_box">
                                	<div class="image"><img src="images/index03.jpg" alt="popular 3"></div>
                                    <div class="text">图像标签</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                <a href="#">
                                <div class="popular_box">
                                	<div class="image"><img src="images/index03.jpg" alt="popular 4"></div>
                                    <div class="text">音频/视频标签</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                
                            </div>
                        </div>
                        <div id="tabs-2">
                            <div class="templatemo_recent_wrapper">
                            	<a href="#">
                            	<div class="recent_box">
                                	<div class="image"><img src="images/index04.jpg" alt="recent 1"></div>
                                    <div class="text">CSS 字体属性</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                <a href="#">
                                <div class="recent_box">
                                	<div class="image"><img src="images/index04.jpg" alt="recent 2"></div>
                                    <div class="text">CSS 列表属性</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                <a href="#">
                                <div class="recent_box">
                                	<div class="image"><img src="images/index04.jpg" alt="recent 3"></div>
                                    <div class="text">CSS 内边距属性</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                <a href="#">
                                <div class="recent_box">
                                	<div class="image"><img src="images/index04.jpg" alt="recent 4"></div>
                                    <div class="text">CSS 定位属性</div>
                                </div>
                                </a>
                                <div class="clear"></div>
                                
                            </div>
                        </div>
   			 		 </div>
                </div>
            </div>
        </div>
    </div>
      <div class="container">
       <div class="row margin30">
            <div class="col-md-4">
                <div class="templatemo_home_midleft shadow">
                  
                    <div class="templatemo_home_midleft_in">
                        <div class="small">入门知识</div>
                        <div class="big">HTML标签</div>

                        <a href="#"><div class="button">进入学习</div></a>
                    </div>
                    <div class="clear"></div>
              </div>
            </div>
            <div class="col-md-4 s_margin30">
                <div class="templatemo_home_midmid shadow">
                    <div class="big">CSS 
                        <span class="icon">C</span>
                    </div>
                    <div class="small">用来表现HTML等文件样式的计算机语言</div>
                    <div class="para">
                        .
                    </div>
                    <div class="green">
                        CSS样式是表现(外观控制)。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
                    </div>
                    <div class="readmore"><a href="#">进入学习</a></div>
                    <div class="clear"></div>
              </div>
            </div>
            <div class="col-md-4 s_margin30">
                <img src="images/index05.jpg" class="shadow" alt="templatemo home image02">
                <div class="templatemo_home_midright">
                    <div class="big">案例分析</div>
                    <div class="small">进入学习</div>
                </div>
            </div>
       </div>
    </div>
    <!-- home end -->
	<!-- footer start -->
    <div class="container">
    	<div class="row">
        	<div class="col-md-12 margin30 center">Copyright &copy; 2017 四川广播电视大学 | 信息中心 媒体制作部  - 四川  | 成都 </div>
            <div class="margin30">&nbsp;</div>
        </div>
    </div>
    <!-- footer end -->
  </body>
</html>